<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>柱状图统计</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 影音分析系统 <span
        class="c-gray en">&gt;</span> 堆叠图 <a class="btn btn-success radius r"
                                                style="line-height:1.6em;margin-top:3px"
                                                href="javascript:location.replace(location.href);" title="刷新"><i
        class="Hui-iconfont">&#xe68f;</i></a></nav>

<div class="page-container">
	<div class="f-14 c-error">特别声明：ApacheEchart 是一个基于 JavaScript 的开源可视化图表库，仅免费提供给个人学习、个人网站，如果在商业项目中使用，请去Apache
		Echart官网网站购买商业授权。或者您也可以选择其他免费的第三方图表插件，例如HighChart。华清远见不承担任何版权问题。
	</div>

	<div>
		<br>
		<hr>
		<br></div>
	<div id="container" class="cur" style="min-width:1280px;height:800px"></div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/highcharts.js"></script>
<script type="text/javascript" src="lib/hcharts/Highcharts/5.0.6/js/modules/exporting.js"></script>

<!--引入公共的组件库，减少屎山代码-->
<script src="js/commons/commonlibs.js"></script>
<script src="js/auth/auth.js"></script>

<script type="module">

    let flag = await checkCurrentUserLoginStatus();
    flag = JSON.parse(flag);

    if(!flag){ //表示当前用户没有登录
        window.location.href = 'login.html';
    }

	let chartDom = document.getElementById('container');
	let myChart = echarts.init(chartDom);

	let option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				// Use axis to trigger tooltip
				type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
			}
		},
		legend: {},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'value'
		},
		yAxis: {
			type: 'category',
			//data: ['Comedy', 'UNA', 'Autos', 'Blogs', 'DIY', 'Travel', 'Animation']
			data: []
		},
		series: [
			{
				name: 'No1',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [320, 302, 301, 334, 390, 330, 320]
				data: []
			},
			{
				name: 'No2',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [120, 132, 101, 134, 90, 230, 210]
				data: []
			},
			{
				name: 'No3',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [220, 182, 191, 234, 290, 330, 310]
				data: []
			},
			{
				name: 'No4',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [150, 212, 201, 154, 190, 330, 410]
				data: []
			},
			{
				name: 'No5',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [820, 832, 901, 934, 1290, 1330, 1320]
				data: []
			},
			{
				name: 'No6',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [820, 832, 901, 934, 1290, 1330, 1320]
				data: []
			},
			{
				name: 'No7',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [820, 832, 901, 934, 1290, 1330, 1320]
				data: []
			},
			{
				name: 'No8',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [820, 832, 901, 934, 1290, 1330, 1320]
				data: []
			},
			{
				name: 'No9',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [820, 832, 901, 934, 1290, 1330, 1320]
				data: []
			},
			{
				name: 'No10',
				type: 'bar',
				stack: 'total',
				label: {
					show: true
				},
				emphasis: {
					focus: 'series'
				},
				//data: [820, 832, 901, 934, 1290, 1330, 1320]
				data: []
			}

		]
	};

	//使用刚刚指定的配置项和数据项显示图表
	myChart.setOption(option);

	window.onload = initCatalogVideoInfoView();
	//
	function initCatalogVideoInfoView(){
		queryCatalogVideoInfoViews().then(resp=>{
			if(resp.data.code === 200){
				console.log(resp.data.data);
				option.yAxis.data = resp.data.data.catalogList;
                for(let i=0;i<resp.data.data.catalogList.length;i++ ){
                    for(let j=0;j<10;j++){
						option.series[j].data.push(resp.data.data.catalogVideoViewsList[i][j])
					}
				}

				//动态刷新；
				setTimeout(() => {
					//myChart.setOption(option, true);
					myChart.setOption(option, {replaceMerge: ['yAxis','series']}, true)
					myChart.hideLoading();
				}, 1000)
			}
		})
	}
</script>
</body>
</html>